<meta title="京东分类选择器" width="800px" args="multi:false"/>
<div class="p">
    <div>
        <ol class="breadcrumb" s="tpl" id="breadcrumb" s-data="{}">
            <li class="file-dir" data-id="0" data-grade="-1"><a href="javascript:;">根分类</a></li>
            {%$.each(path_stack, function(i){%}
            <li class="file-dir" data-id="{%=this.id%}" data-grade="{%=this.grade%}" data-idx="{%=i%}"><a href="javascript:;">{%=this.name%}</a></li>
            {%})%}
            <li>
                <button type="button" class="btn btn-default btn-xs s-loading-icon" s-click="return $itemCatsGrid.refresh()">
                    <i class="fa fa-refresh s-loading-spinner"></i>
                </button>
            </li>
        </ol>
    </div>
    <div id="itemCatsGrid"
         s='datac,nda,check'
         s-check="{multiple: multi}"
         s-data="Smart.cleanJsonRef(S.get('/api/jos/goodsCategory/list/' + parentId + '-' + grade))" style="height: 500px; overflow: auto">
        <table class="table table-striped table-bordered table-middle table-condensed">
            <tr>
                <th>ID</th>
                <th>分类名</th>
            </tr>
            <tbody s="loop">
            <tr s-loop-role="empty">
                <td colspan="2">暂无分类</td>
            </tr>
            <tr s-loop-role="row" s="datac" s-check-role="i" class="itemCat">
                <td name="id"></td>
                <td>
                    <a href="javascript:;" s-click="select(this)" name="name"></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    var parentId = 0;
    var grade = 0;

    var path_stack = [];

    S.meta.btns = [
        {
            name: "选择",
            style: "btn btn-primary",
            click: function() {
                var datas = $itemCatsGrid.getCheckedData();
                if (datas.length) {
                    S.close(datas);
                } else {
                    S.toast("您还没有选择分类！", "warning");
                }
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    $itemCatsGrid.node.delegate(".itemCat", 'dblclick', function(e) {
        var node = $(e.currentTarget);
        var $node = Smart.of(node);
        var data = $node.data();
        S.close([data]);
    })

    function select($this) {
        var data = $this.parent().data();
        if(data.grade == 2) {
            return;
        }
        loadShopcat(data.id, data.grade + 1);
        path_stack.push(data);
        $breadcrumb.refresh();
    }

    $breadcrumb.node.delegate('.file-dir', 'click', function(e) {
        var node = $(e.currentTarget);
        var idx = node.attr("data-idx");
        var id = node.attr("data-id");
        var grade = parseInt(node.attr('data-grade'))
        if(id == parentId) {
            return;
        }
        if(id == 0) {
            path_stack = [];
        } else {
            path_stack = path_stack.slice(0, idx + 1);
        }
        loadShopcat(id, grade + 1);
        $breadcrumb.refresh();
    })

    function loadShopcat(pid, g) {
        parentId = pid;
        grade = g;
        $itemCatsGrid.refresh();
    }

</script>